<template>
  <div class="more-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="优惠券列表" name="first">
        <!-- 搜索区域 -->
        <topsearch @opendialog='opendialog' class="topsearch" @searchlist='searchlist'></topsearch>
        <!-- 表格区域 -->
        <coupontable v-if="iscoupon" @deleteitem='deleteitem' @openedit='openedit' @refresh='refresh' @changepageTotal='changepageTotal'
          @changepage='changepage' :tabData='tableData'></coupontable>
        <!-- 新增弹窗 -->
        <coupondialog :dialogContent='editData' :diatitle='diatitle' @confirm='confirm' :formType='formtype'
          :isshowDialog='isshowdialog' @closeDialog='closeDialog'></coupondialog>
      </el-tab-pane>
      <el-tab-pane label="领取记录" name="second">
        <!-- 搜索 -->
        <recordsearch @refreshrecord='refreshrecord' @searchlist='recordsearch'></recordsearch>
        <!-- 表格 -->
        <studenttablehead :tabData='listData' @handleSizeChange='recordchangepage' @handleCurrentChange='recordchangeTotal'
          v-if="issuccess">
          <el-table-column prop="coupon_type" label="优惠类型" width="" align="center">
            <template slot-scope='scope'>
              <span>{{scope.row.coupon_type}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="coupon_money" label="优惠金额" width="" align="center">
            <template slot-scope='scope'>
              <span>{{scope.row.coupon_money}}元</span>
            </template>
          </el-table-column>
          <el-table-column prop="coupon_rule" label="订单价大于" width="" align="center">
            <template slot-scope='scope'>
              <span>{{scope.row.coupon_rule}}元</span>
            </template>
          </el-table-column>
          <el-table-column prop="coupon_start" label="开始时间" width="" align="center">
            <template slot-scope='scope'>
              <span>{{scope.row.coupon_start}}元</span>
            </template>
          </el-table-column>
          <el-table-column prop="coupon_end" label="结束时间" width="" align="center">
            <template slot-scope='scope'>
              <span>{{scope.row.coupon_end}}元</span>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="" align="center"></el-table-column>
        </studenttablehead>

      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
  //学员表格
  import studenttablehead from '@/components/studenthead'
  //顶部搜索区域
  import topsearch from './component/topsearch'
  //列表
  import coupontable from './component/coupontable'
  //新增弹窗
  import coupondialog from './component/addcoupondialog'
  //领取记录
  import recordTable from './component/recordtable'
  //领取记录顶部搜索
  import recordsearch from './component/recordsearch'
  //api
  import {
    getcouponList,
    getreadInfo,
    deleteitem,
    getrecord
  } from '@/api/coupon'
  //按钮权限验证
  import checkPermission from "@/utils/permission";
  export default {
    data() {
      return {
        //领取记录是否加载成功
        isrecord: false,
        //数据是否加载成功 优惠券列表
        iscoupon: false,
        issuccess: false,
        //弹窗标题
        diatitle: '新增优惠券',
        //tabs切换
        activeName: 'first',
        //是否显示弹窗
        isshowdialog: false,
        //第几页
        page: 1,
        //翻页总数
        total: 10,
        //总共有多少条数据
        pageTotals: '',
        //新增还是编辑
        formtype: 0,
        //列表数据
        tableData: {},
        //编辑回填数据
        editData: {},
        //搜索参数
        searchparams: {},
        //记录列表数据
        recordData: {},
        //搜索领取列表参数
        searrecord: {}
      }
    },
    components: {
      topsearch,
      coupontable,
      coupondialog,
      recordTable,
      recordsearch,
      studenttablehead
    },
    methods: {
      checkPermission,
      //搜索记录列表
      recordsearch(val) {
        this.searrecord = val
        this.getrecordlist()
      },
      //刷新记录列表
      refreshrecord() {
        this.getrecordlist()
      },
      //领取记录翻页 一页的数量
      recordchangeTotal(val) {
        this.total = val
        this.getrecordlist()
      },
      //领取记录翻页
      recordchangepage(val) {
        this.page = val
        this.getrecordlist()
      },

      //获取领取记录数据
      async getrecordlist() {
        let params = {
          page: this.page,
          rows: this.total
        }
        if (this.searrecord.title) {
          params.title = this.searrecord.title
        }
        if (this.searrecord.type) {
          params.type = this.searrecord.type
        }
        if (this.searrecord.status) {
          params.status = this.searrecord.status
        }
        //请求数据
        let data = await getrecord(params)

        if (data.code == '0000') {
          this.listData = data.data
          this.isrecord = true
          this.issuccess = true
        }
      },
      //删除
      deleteitem(id) {
        this.$confirm('您确认删除该优惠券吗？删除后已领取的优惠券仍然有效，是否继续?', '温馨提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          let data = await deleteitem({
            id
          })
          if (data.code == '0000') {
            this.$message.success('删除优惠券成功！')
            //此时已经实现删除操作，所以总页数的值需要减1，Math.ceil是向上取整，保证始终大于等于1
            const totalPage = Math.ceil((this.pageTotals - 1) / 10)
            //记录当前页码
            //记住删除最后一条数据时当前码是最后一页
            const pagenum = this.page > totalPage ? totalPage : this.page
            //实现跳转
            this.page = pagenum < 1 ? 1 : pagenum
            //刷新列表
            this.getCoupontable()
          }
        }).catch(() => {

        });
      },
      //搜索
      searchlist(val) {
        this.searchparams = val
        this.getCoupontable()
      },
      //编辑打开弹窗
      async openedit(id) {
        this.$bus.emit("editform", id)
        this.diatitle = '编辑优惠券'
        this.isshowdialog = true
        this.formtype = 1
      },
      //刷新列表数据
      refresh() {
        this.getCoupontable()
      },
      //确认弹窗
      confirm() {
        this.isshowdialog = false
        this.getCoupontable()
      },
      // 获取列表数据
      async getCoupontable() {
        let params = {
          page: this.page,
          rows: this.total
        }
        if (this.searchparams.category) {
          params.category = this.searchparams.category
        }
        if (this.searchparams.type) {
          params.type = this.searchparams.type
        }
        if (this.searchparams.isshow || this.searchparams.isshow === 0) {
          params.is_show = this.searchparams.isshow
        }
        if (this.searchparams.time) {
          params.coupon_start = this.searchparams.time[0]
          params.coupon_end = this.searchparams.time[1]
        }
        let data = await getcouponList(params)
        if (data.code == '0000') {
          this.iscoupon = true
          //列表数据
          this.tableData = data.data
          //总页数
          this.pageTotals = data.data.page.total
        }

      },
      //tabs切换
      handleClick(tab, event) {
        this.page = 1
        this.total = 10
        if (tab.name == 'first') {
          //获取优惠券数据
          this.getCoupontable()
        } else {
          //获取领取记录
          this.getrecordlist()
        }
      },
      //关闭弹窗
      closeDialog() {
        this.isshowdialog = false
      },
      //打开新增优惠卷弹窗
      opendialog() {
        this.formtype = 0
        this.isshowdialog = true
        this.diatitle = '新增优惠券'
      },
      //翻页总数
      changepageTotal(val) {
        this.total = val
        this.getCoupontable()
      },
      //翻页
      changepage(val) {
        this.page = val
        this.getCoupontable()
      }
    },
    mounted() {
      //获取列表数据
      this.getCoupontable()
    }
  }
</script>

<style scoped lang="scss">
  .topsearch {
    margin-top: 20px;
  }

  ::v-deep {
    .el-tabs__nav-wrap::after {
      height: 1px;
    }

    .el-tabs__item {
      font-size: 16px;
    }

    .el-tabs__item.is-active {
      font-weight: bold;
    }
  }
</style>
